<template>
  <scroll-view
    :scroll-x="scroll.x"
    :scroll-y="scroll.y"
    class="scroll-container"
    :class="className"
  >
    <list-scroll-view
      v-model="refreshing"
      @refresh="onRefresh"
      @load="onLoad"
    >
      <column
        :format="item.format"
        :title="item.title"
        :description="item.description"
        :label="item.extend"
        :medias="item.medias"
        v-for="(item,index) in list"
        :key="index"
        @click="pushNativelink(item.mplink)"
      />
    </list-scroll-view>
  </scroll-view>
</template>

<script>
import ListScrollView from '@/components/listScrollView/index'
import Column from '@/components/column/index'
import MPRequest from '@/utils/request'
export default {
  components: {
    Column,
    ListScrollView
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    },
    scroll: {
      type: Object,
      default: {
        x: false,
        y: true
      }
    }
  },
  data () {
    return {
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      items: [
        {
          id: 1,
          title: '12年前发明“熊猫烧香”病毒的网络天才，坐4年牢后，现状如何？',
          description: '微观影1视 1小时前 102评论',
          format: 'banner',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/01.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 2,
          title: '济南东部房价“喋喋不休”，西部房价依然坚挺，为何？',
          description: '济南楼市 1小时前 102评论',
          format: 'default',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/02.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 3,
          title: '心寒！市民主动清理黑衣人设置的路障 被暴徒用重器猛击头部',
          description: '环球网国内 7小时前 21评论',
          format: 'default',
          medias: []
        },
        {
          id: 4,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/05.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 6,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 5,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 7,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        }
      ],
      refreshing: false,
      triggered: false,
      freshing: false,
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },
  watch: {},
  computed: {},
  onLoad (option) {
    console.log('onLoad options:', option)
    // if (option.id) {
    //   this.categoryId = parseInt(option.id)
    // }
  },
  beforeMount () {
    console.log('url::::', this.url)
    this.getList()
  },
  mounted () {
    console.log('list data', this.list)
  },
  methods: {
    onRefresh () {
      // 初始化页码
      this.page = 1
      this.getList()
    },
    // 获取数据方法
    getList () {
      console.log('event/index getList')
      const that = this
      that.refreshing = false
      let startTime = new Date()
      let params = {
        page: that.page // 传递页码
      }
      MPRequest.get(this.url, params).then(res => {
        // 返回的数据
        console.log('data', res)
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()

        let itemCount = res.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...res.items)
          } else {
            that.list = res.items
          }
        }
        that.meta = res.meta

        let endtime = new Date()
        let duration = endtime - startTime
        if (duration < 1500) {
          console.log('duration', duration)
          setTimeout(() => {
            that.refreshing = true
          }, 1500 - duration)
        } else {
          that.refreshing = true
        }
        console.log('change refreshing to', that.refreshing)
        that.triggered = false
        that.freshing = false
      })
    }
  }
}
</script>

<style lang="less">
.scroll-container {
  height: 100%;
}
.swiper-corner {
  margin: 15px 0;
}

.demo-text-1 {
  background-color: rgb(142, 226, 14);
}
.demo-text-2 {
  background-color: tomato;
}
.demo-text-3 {
  background-color: rgb(248, 186, 29);
}
.hot-group {
  padding: 15px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;

  &-cell {
    flex-basis: 50%;
    .van-cell {
      padding: 10px;
      &__value {
        flex: none;
        -webkit-flex: none;
      }
    }

    image {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
